<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="taglib" prefix="pln" %>

<ul class="nav nav-tabs" id="config_tab" data-tabs="tabs">
	<li class="active"><a href="#config_tab_design">Diseño</a></li>
    <li><a href="#config_tab_header">Encabezado</a></li>
    <li><a href="#config_tab_social">Redes Sociales</a></li>
</ul>

<div class="tab-content">

<!-- TAB UNO LAYOUTS -->
<div class="tab-pane active" id="config_tab_design">

<h3><i class="gen-enclosed foundicon-tools"></i>Grilla general.</h3>
<p class="note">Más adelante podrás distintas opciones de grillas para las paginas.</p>


<div id="design_templates" class="layout-selector">
<ul>
<c:forEach  items="${config.templates}" var="template" varStatus="status">
<li id="template-${template}" data-template="${template}" class="${website.design.template eq template ? 'active' : ''}"><img src="${pageContext.request.contextPath}/images/structure/${template}.jpg"><input name="layout" type="radio" value="layout-${template}" ${website.design.template eq template ? 'checked' : ''}/></li>
</c:forEach>
</ul>
</div>  


<h3><i class="gen-enclosed foundicon-tools"></i>Paleta de colores.</h3>                                              
<p class="note" >Elija la combinacion de colores para su sitio.</p>
											
<div class="color-selector">
<ul>
<c:forEach  items="${config.colorPalettes}" var="colorPalette" varStatus="status">
<li class="${website.design.colorPalette eq colorPalette ? 'active' : ''}"><img src="${pageContext.request.contextPath}/images/colors/${colorPalette}.jpg"><input name="color" type="radio" value="${colorPalette}" ${website.design.colorPalette eq colorPalette ? 'checked' : ''}/></li>
</c:forEach>
</ul>
</div> 



<h3><i class="gen-enclosed foundicon-tools"></i>Fondo de la página.</h3>
<p class="note">Si no modifica esta opción, el fondo será asignado según la paleta de colores seleccionada previamente.</p>                                              

<select class="form-control background-selector" name="mediumSelect" id="mediumSelect">
                <option value="none" ${website.design.bgThemeType eq 'NONE' ? 'selected' : ''}>De la paleta de colores</option>
                <option value="pattern" ${website.design.bgThemeType eq 'PATTERN' ? 'selected' : ''}>Elija una trama de fondo</option>
                <option value="upload_image" ${website.design.bgThemeType eq 'UPLOAD_IMAGE' ? 'selected' : ''}>Cargue una imagen de fondo</option>
</select>

<div class="background patterns" style="display:none;">
  


			<div class="background-container">


            <a class="prev browse left"></a>

            <div class="scrollable" id="scrollable">
             
              <div class="items">
              <div>
            	 <c:forEach  items="${config.backgroundThemes}" var="theme" varStatus="status">
            		 <span class="${website.design.theme eq theme ? 'active' : ''}"><img src="${pageContext.request.contextPath}/images/patterns/${theme}" /><input name="pattern" type="radio" value="${theme}" ${website.design.theme eq theme ? 'checked' : ''}/></span>
            		 <c:if test="${status.count % 7 == 0}">
            			</div><div>
           			 </c:if>
             	</c:forEach>
              
                </div>
                          
              </div>
             
            </div>
             
            <a class="next browse right"></a>

            </div>

</div>


<div class="background upload-image" style="display:none;">


<div style="">
<pln:image id="1" websiteId="${website.id}" filename="${website.design.image.fileName}" key="design" type="single" classname="uploader_design"/>

</div>

</div>                                            
                                              

</div>


<!-- FIN TAB UNO LAYOUTS-->


<div class="tab-pane" id="config_tab_header">


<h3><i class="gen-enclosed foundicon-tools"></i>Nombre</h3>
<p class="note">Este nombre de dara identidad a la pagina. Puede ser el nombre de su empresa o el suyo propio.</p>   
<form id="headerForm">
<input  class="form-control" name="name" id="headerName" value="${website.header.name}" placeholder="Nombre"/> 
</form>

<pln:image id="2" websiteId="${website.id}" filename="${website.header.logo.fileName}" key="header" type="single" classname="uploader_header_logo" title="Imágenes Logo.." text="Debe subir su logo en formato .PNG/.GIF con fondo transparente para que su sitio se vea óptimo." />
  



<pln:image id="3" websiteId="${website.id}" filename="" key="header_gal" type="gallery" classname="uploader_header_gal" title="Imágenes rotativas." text="Puede subir una o más imágenes." images="${website.header.carrousel}" modalDeleteId="galImgRemove" modalText="Desea borrar Imagen?"/>
  
                                         
  </div>  
                                              
  <div class="tab-pane" id="config_tab_social">



                    <form  id="socialForm">
                   
                    <input class="form-control socialForm" id="title" name="title" type="text" value="${website.socialFeed.title}" placeholder="Titulo" />
                    <input class="form-control socialForm" id="description" name="description" type="text" value="${website.socialFeed.description}" placeholder="Descripcion" />
                    <input class="form-control socialForm" id="keywords" name="keywords" type="text" value="${website.socialFeed.keywords}" placeholder="Palabras Claves" />
                    <input class="form-control socialForm" id="facebookId" name="facebookId" type="text" value="${website.socialFeed.facebookId}" placeholder="Facebook ID" />
                    <input class="form-control socialForm" id="twitterId" name="twitterId" type="text" value="${website.socialFeed.twitterId}" placeholder="Twitter ID" />
                    <input class="form-control socialForm" id="youtubeId" name="youtubeId" type="text" value="${website.socialFeed.youtubeId}" placeholder="YouTube ID" />
                    <input class="form-control socialForm" id="vimeoId" name="vimeoId" type="text" value="${website.socialFeed.vimeoId}" placeholder="Vimeo ID" />
       
                    </form>
 
                                              
 </div>

                                           
 </div>
 

